<template>
  <div class="opinion">
    <h1 class="tc">意见反馈</h1>
    <div class="opinion-form">
      <!-- <span class="lable">给我们的建议</span>
      <div class="content">
        <el-input
          type="textarea"
          :maxlength='500'
          placeholder="请输入您的意见和建议，以帮助我们更好地改进平台"
          resize='none'
          v-model="text">
        </el-input>
        <span v-if="text == ''" class="lengthTips">不多于500字</span>
      </div> -->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" label-position="top">
        <el-form-item label="给我们的建议" prop="opinions">
          <el-input type="textarea" 
            placeholder="请输入您的问题或建议，以帮助我们更好的改进平台。" 
            :maxlength ='maxlength' 
            resize='none'
            v-model="ruleForm.opinions">
          </el-input>
          <span v-if="ruleForm.opinions == ''" class="lengthTips">不多于500字</span>
        </el-form-item>
      </el-form>
      
    </div>
    <div class="opinion-tips">
      <span class="lable">注意事项</span>
      <ul class="list">
        <li>1、反馈意见被采纳后可获得100元奖励。</li>
        <li>2、如反馈无聊、恶意的意见则会惩罚500元。</li>
        <li>3、反馈结果会由系统消息发送给您。</li>
      </ul>
    </div>
    <div class="opinion-btns clearfloat">
       <el-button type="primary" class="fr submit" @click="submit('ruleForm')">提交</el-button>
       <el-button type="primary" plain class="fr cancel" @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: false,
      ruleForm: {
        type: '',
        opinions: ''
      },
      maxlength: 500,
      rules: {
        type: [
          { required: true, message: '请选择建议类型', trigger: 'change' }
        ],
        opinions: [
          {  required: true, message: '请输入建议', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    clear () {
      this.$refs['ruleForm'].resetFields()
    },
    cancel () {
      this.$refs['ruleForm'].resetFields()
      this.$router.push({path:'/agent/home/menu'})
    },
    submit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitPost()
        } else {
          return false
        }
      });
    },
    submitPost () {
      let params = {
        // type: this.ruleForm.type,
        opinions: this.ruleForm.opinions,
      }
      this.$axios.post(`api/opinion_collection`, params).then(res => {
        if (res.data.code == 200) {
          this.$alert('感谢您的反馈，反馈结果会由系统消息发送您，祝您生活愉快!', '反馈成功！', {
            confirmButtonText: '确定',
            center: true,
            callback: action => {
            }
          })
          this.clear()
        } else if (res.data.code == 400) {
          this.$message.error(res.data.message)
        }
      }).catch(err => {

      })
    },
  }
}
</script>

<style lang='less'>
  .opinion {
    height: 100%;
    width: 100%;
    background: #fff;
    padding: 60px 30px 50px 30px;
    box-sizing: border-box;

    h1 {
      font-size: 20px;
      font-weight: 700;
    }

    &-form {
      margin-top: 35px;
      .el-form {
        .el-form-item {
          margin-bottom: 20px;

          .el-form-item__label {
            color:rgba(57,57,57,1);
            font-size: 15px;
            line-height: 1;
            margin-bottom: 20px;
          }
          .el-form-item__label::before {
            display: none;
          }
          .el-form-item__content {
              width: 480px;
              height: 240px;
              position: relative;
            .el-textarea {
              height: 100%;
              border:1px solid rgba(191,191,191,1);
              border-radius:5px;
              .el-textarea__inner {
                height: 100%;
                font-size: 15px;
              }
            }
            .lengthTips {
              position: absolute;
              bottom: 8px;
              right: 17px;
              color:rgba(210,210,210,1);
              font-size: 15px;
              line-height: 1;
            }
          }
        }
      }

    }
    &-tips {
      margin-top: 34px;
      .lable {
        font-size:15px;
      }
      .list {
        margin-top: 10px;
        li {
          list-style: none;
          font-size:15px;
          line-height: 25px;
        }
      }
    }
    &-btns {
      margin-top: 40px;
      .el-button {
        margin-left: 0;
        margin-right: 20px;
        padding: 8px 22px 8px 22px;
        font-size: 15px;
        border-radius: 5px;
      }
      

      .submit {
        background: #249DFF;
        color: #fff;
        margin-right: 0;
      }
      .cancel {
        border:1px solid rgba(36,157,255,1);
        background:rgba(255,255,255,1);
        color: #249DFF;
      }
    }
  }
</style>